/* 苹果开关 */

.ToggleButton {
    --controlLen: 414;
    /* 按钮宽度 */
    --buttonWidth: calc(var(--controlLen, 414) * 0.1159 * 1px);
    /* 按钮高度 */
    --buttonHeight: calc(var(--buttonWidth) * 0.5416);
    /* 圆形直径 */
    --toggleDiameter: calc(var(--buttonWidth) * 0.4167);
    /* 纽圆距 */
    --buttonToggleOffset: calc(
        (var(--buttonHeight) - var(--toggleDiameter)) / 2
    );
    /* 圆形阴影 */
    --toggleShadowOffset: calc(var(--buttonWidth) * 0.0208);
    /* 圆形按压时宽度 */
    --toggleWide: calc(var(--buttonWidth) * 0.5625);
    /* 日间灰色 */
    --colorGrey: var(--iconWhite, rgba(245, 245, 245, 1));
    /* 点击绿色 */
    --colorGreen: var(--StandarGreen, rgba(48, 209, 88, 1));
    /* 标准白色 */
    --colorWhite: var(--StandardWhite, rgba(255, 255, 255, 1));

    width: fit-content;
}

/* 按钮框 */
.ToggleButton span {
    display: inline-block;
    width: var(--buttonWidth);
    height: var(--buttonHeight);
    background-color: var(--colorGrey);
    border-radius: calc(var(--buttonHeight) / 2);
    position: relative;
    transition: .3s all ease-in-out;
}

/* 按钮圆形 */
.ToggleButton span::after {
    content: "";
    display: inline-block;
    width: var(--toggleDiameter);
    height: var(--toggleDiameter);
    background-color: var(--colorWhite);
    border-radius: calc(var(--toggleDiameter) / 2);
    position: absolute;
    top: var(--buttonToggleOffset);
    transform: translateX(var(--buttonToggleOffset));
    box-shadow: var(--toggleShadowOffset) 0 calc(var(--buttonToggleOffset) * 4) rgba(0, 0, 0, .10);
    transition: .3s all ease-in-out;
}

/* 按钮控制 */
.ToggleButton input[type="checkbox"]:checked + span {
    background-color: var(--colorGreen);
}

/* 移动 */
.ToggleButton input[type="checkbox"]:checked + span::after {
    transform: translateX(calc(var(--buttonWidth) - var(--toggleDiameter) - var(--buttonToggleOffset)));
    box-shadow: calc(-1 * var(--toggleShadowOffset)) 0 calc(var(--buttonToggleOffset) * 4) rgba(0, 0, 0, .10);
}

.ToggleButton input[type="checkbox"] {
    display: none;
}

/* 长按时按钮效果 */
.ToggleButton input[type="checkbox"]:active + span::after {
    width: var(--toggleWide);
}

.ToggleButton input[type="checkbox"]:checked:active + span::after {
    transform: translateX(calc(var(--buttonWidth) - var(--buttonToggleOffset) - var(--toggleWide)));
}